<template>
    <div class="picking zy-content ">
      <div class="searchBox search-box-layout">
        <Row :gutter="24">
          <Col span="4">
            <div>
              <p class="label">{{$t('common.Entity')}}</p>
              <div class="ipt">
                <Select v-model="searchParams.companyId"
                        @on-change="changeCompany"
                        clearable :placeholder="`${$t('common.selectInfo')}`">
                  <Option v-for="(item,index) of tagList" :value="item.id" :key="index">{{item.name}}</Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('common.Warehouse')}}</p>
              <div class="ipt">
                <Select v-model="searchParams.warehouseId" clearable
                        :placeholder="`${$t('common.selectInfo')}`">
                  <Option v-for="(item,index) of warehouseList" :value="item.id" :key="index">
                    {{ item.backupName }}
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('common.ReturnTime')}}</p>
              <div class="ipt">
                <DatePicker
                    v-model="applyTimeList"
                    type="datetimerange"
                    format="yyyy-MM-dd HH:mm:ss"
                    placement="bottom-end"
                    :placeholder="`${$t('common.selectInfo')}`"
                    @on-change="handleRangeChange"
                />
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label hide-label">--</p>
              <div class="ipt">
                <Button class="search-btn"
                        v-has="'revertListserarch'"
                        type="primary" @click="changeNum()">{{ $t('common.Query') }}</Button>
                <Button v-has="'revertListserarch'"
                    class="reset-btn"
                    @click="reset()"
                >{{ $t('common.reset') }}
                </Button>
              </div>
            </div>
          </Col>
        </Row>
      </div>
        <div class="list-layout mt16">
          <div class="btns clear">

            <span class="title">{{ $t('common.listInformation') }}</span>
            <Button v-has="'revertNewReturn'"  @click="addRecipients">{{ $t('common.NewReturn') }}</Button>
            <Button v-has="'revertListExport'"  @click="handleOutDel">{{ $t('common.batchExport') }}</Button>
              <Button @click="getTableColumns(columns)">
                  {{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}
              </Button>
          </div>
          <div class="tableContent">
            <Table
                class="resizable-table" border @on-column-width-resize="onColumnWidthResize"
                :columns="columnsList"
                ellipsis
                ref="selection"
                @on-selection-change="onSelectChange"
                :data="dataArr">
              <template slot-scope="{ row }" slot="action">
                <span class="operationBtn" v-has="'revertCheck'" @click="addRecipients(row)"><i class="iconfont zy-common-chakan"></i>{{ $t('common.Check') }}</span>
              </template>
            </Table>
          </div>
          <div class="pageWrap mt16">
            <pageLeftTitle :total="total" :selected="ids.length" />
            <Page :total="total" :page-size="pageSize" :page-size-opts="pageSizeOption" :current="pageNum"
                  @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total/>
          </div>
        </div>
    </div>
</template>

<script>
import fileDownload from 'js-file-download'
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
    name: "picking",
    components: {},
    mixins:[toggleTableOperation],
    data() {
        return {
            applyTimeList: [],
            formInfo: {},
            selectList: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            searchParams: {
                companyId: '',
                warehouseId: '',
                // applyStartTime:'',
                // applyEndTime:'',
                createBy: ''
            },
            pageSizeOption: [10, 20, 30, 40],
            warehouseList: [],
            tagList: [{id: '', name: '全部'}],
            applyList: [
                {id: 0, name: '保存'},
                {id: 1, name: '已提交'},
                {id: 2, name: '撤回'},
                {id: 3, name: '已驳回'},
            ],
            approvalList: [
                {id: 0, name: '待审批'},
                {id: 1, name: '审批通过'},
                {id: 2, name: '驳回'},
                {id: 3, name: '审批未通过'},
            ],
            columns: [
                {type: 'selection', width: 60, align: 'center'},
                {
                    title: `${this.$t('common.ReturnTime')}`,
                    key: 'revertTime',
                    align: "center",
                    minWidth: 120,
                    resizable: true
                },
                {
                    title: `${this.$t('common.Entity')}`,
                    key: 'companyName',
                    align: "center",
                    minWidth: 120,
                    resizable: true
                },
                {
                    title: `${this.$t('common.Warehouse')}`,
                    key: 'warehouseName',
                    align: "center",
                    minWidth: 120,
                    resizable: true
                },
                {
                    title: `${this.$t('common.ReturnQuantity')}`,
                    key: 'revertNum',
                    align: "center",
                    minWidth: 200,
                    resizable: true
                },
                // {
                //   title: '归还人',
                //   key: 'revertBy',
                //   align: "center",
                //   minWidth: 200
                // },
                {
                    title: `${this.$t('common.operation')}`,
                    slot: "action",
                    minWidth: 40,
                    align: "center",
                    fixed: 'right'
                }
            ],
            assetsList: [],
            dataArr: [],
            OAList: [],
            ids: [],
            timerId: null
        }
    },
    created() {
        this.getTableColumnsWidth(this.columns)
        this.getCompanyList()
        this.searchList()
    },
    methods: {
        reset(){
            this.searchParams = {};
            this.applyTimeList = []
            this.searchList()
        },
        getApplicationOAList(query) {
            if (query !== '') {
                this.loading = true
                this.axios({
                    method: 'get',
                    url: '/basic/user/searchOAUser',
                    params: {
                        key: query
                    }
                }).then(res => {
                    if (res.code === 200) {
                        this.OAList = res.data.map(item => {
                            return {
                                ...item,
                                showName: item.empno + '----' + item.username
                            }
                        })
                    } else {
                        this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                    }
                }).finally(() => {
                    this.loading = false
                })
            } else {
                this.OAList = []
            }
        },
        addRecipients(row) {
            const query = {
                status: 'add'
            }
            if (row.warehouseId) {
                query.status = 'detail'
                query.warehouseId = row.warehouseId
                // query.applyUseId = row.applyUseId
            }
            this.$router.push({
                path: '/spareParts/operations/addrecipientsrevert',
                query
            })
        },
        changeCompany(val) {
            this.warehouseList = []
            this.searchParams.warehouseId = ''
            // let companyId;
            if (val) {
                this.getwarehouseList(val)
                // companyId = this.tagList.find(item => item.id == val).id
                // this.getwarehouseList(companyId)
            }
        },
        getwarehouseList(companyId) {
            this.axios({
                method: 'post',
                url: '/dms/dmsBackupConfig/queryBackupsByCompany',
                data: {
                    companyId
                }
            }).then(res => {
                if (res.data && res.data.length) {
                    this.warehouseList = res.data
                }
            })
        },
        assetsChange() {
            if (this.timerId) {
                clearTimeout(this.timerId)
            }
            this.timerId = setTimeout(() => {
                this.axios({
                    method: 'get',
                    url: '/dms/dmsCheck/calculationAsset',
                    params: {
                        original: Number(this.formInfo.assetsOriginal),
                        id: this.formInfo.id,
                        assetId: this.formInfo.assetId
                    }
                }).then(res => {
                    this.formInfo.assets = res.data
                })
            }, 600)
        },
        handleCancel() {
            this.resultInfoVis = false
        },
        handleOk() {
            this.axios({
                method: 'post',
                url: '/dms/dmsCheck/updateAsset',
                data: {
                    original: Number(this.formInfo.assetsOriginal),
                    id: this.formInfo.id,
                    assetId: this.formInfo.assetId,
                    assets: this.formInfo.assets
                }
            }).then((res) => {
                this.handleCancel()
            })
        },
        onSelectChange(selection) {
            this.selectList = selection
            let arr = []
            if (selection && selection.length) {
                selection.map(item => {
                    arr.push(item.warehouseId)
                })
            }
            this.ids = arr
        },
        //公司列表
        getCompanyList() {
            this.axios({
                method: 'get',
                url: '/basic/company/getCompanyListByUser',
                params: {}
            }).then(res => {
                
                if (res.code === 200) {
                    let arr = res.data.map(item => {
                        return {
                            ...item,
                            id: item.id.toString()
                        }
                    })
                    this.tagList = [...this.tagList, ...arr]
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        handleRangeChange(val) {
            this.searchParams.startTime = val[0]
            this.searchParams.endTime = val[1]
        },
        //删除
        deleteList(row) {
            const ids = [row].map(val => val.id)
            this.axios({
                method: 'get',
                url: `/dms/applyUse/delete?ids=${ids.join(',')}`
            }).then(res => {
                if (res.code == 200) {
                    this.searchList()
                }
            })
        },
        //批量导出
        handleOutDel() {
            let params = {
                pageNo: this.pageNum,
                pageSize: this.pageSize,
                ids: this.ids.toString(),
                ...this.searchParams,
            };
            const filName = '归还'
            this.axios({
                method: 'get',
                url: '/dms/revert/export',
                responseType: 'blob',
                params
            }).then(res => {
                fileDownload(res, filName + '.xlsx')
            })
        },
        //刷新
        handleFresh() {
            this.searchList();
        },
        changeNum() {
            this.pageNum = 1;
            this.searchList();
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.searchList();
        },
        changePageNum(val) {
            this.pageNum = val;
            this.searchList();
        },
        searchList() {
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                ...this.searchParams
            }
            this.axios({
                method: 'get',
                url: '/dms/revert/list',
                params: params
            }).then(res => {
                if (res.code === 200) {
                    this.dataArr = res.data.list
                    this.total = res.data.total
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.picking {

    .formList {
        padding: 30px;

        .btn {
            margin-top: 20px;
            text-align: center;
            width: 100%;
            height: 40px;
        }

        .inputBorder {
            border: 1px solid #dcdee2;
            border-radius: 4px;

        }
    }
}
</style>

